# Create a new Vite + React project
npm create vite@latest shophub-react -- --template react-ts
cd shophub-react
npm install
npm install react-router-dom

shophub-react/
├── src/
│   ├── components/
│   │   ├── ProductCard.tsx
│   │   ├── ProductList.tsx
│   │   └── ProductDetail.tsx
│   ├── pages/
│   │   ├── HomePage.tsx
│   │   └── ProductPage.tsx
│   ├── App.tsx
│   └── main.tsx
├── public/
└── index.html

// src/types.ts
export interface Product {
  id: string;
  name: string;
  description: string;
  price: number;
  image: string;
  category: string;
  inStock: boolean;
}

// src/api/products.ts
import { Product } from '../types';

// Simulating an API call
export async function fetchProducts(): Promise<Product[]> {
  // In reality, this would be: fetch('/api/products')
  await new Promise(resolve => setTimeout(resolve, 500));

  return [
    {
      id: '1',
      name: 'Wireless Headphones',
      description: 'Premium noise-cancelling headphones with 30-hour battery life',
      price: 299.99,
      image: '/products/headphones.jpg',
      category: 'Electronics',
      inStock: true
    },
    {
      id: '2',
      name: 'Smart Watch',
      description: 'Fitness tracking and notifications on your wrist',
      price: 399.99,
      image: '/products/watch.jpg',
      category: 'Electronics',
      inStock: true
    },
    {
      id: '3',
      name: 'Laptop Stand',
      description: 'Ergonomic aluminum stand for better posture',
      price: 49.99,
      image: '/products/stand.jpg',
      category: 'Accessories',
      inStock: false
    }
  ];
}

export async function fetchProduct(id: string): Promise<Product | null> {
  await new Promise(resolve => setTimeout(resolve, 300));
  const products = await fetchProducts();
  return products.find(p => p.id === id) || null;
}

// src/components/ProductCard.tsx
import { Link } from 'react-router-dom';
import { Product } from '../types';

interface ProductCardProps {
  product: Product;
}

export function ProductCard({ product }: ProductCardProps) {
  return (
    <Link to={`/product/${product.id}`} className="product-card">
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p className="price">${product.price}</p>
      <p className="stock">
        {product.inStock ? 'In Stock' : 'Out of Stock'}
      </p>
    </Link>
  );
}

// src/pages/HomePage.tsx
import { useState, useEffect } from 'react';
import { ProductCard } from '../components/ProductCard';
import { fetchProducts } from '../api/products';
import { Product } from '../types';

export function HomePage() {
  const [products, setProducts] = useState<Product[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetchProducts()
      .then(data => {
        setProducts(data);
        setIsLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setIsLoading(false);
      });
  }, []);

  if (isLoading) return <div>Loading products...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div className="home-page">
      <h1>ShopHub - Premium Products</h1>
      <div className="product-grid">
        {products.map(product => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </div>
  );
}

// src/pages/ProductPage.tsx
import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { fetchProduct } from '../api/products';
import { Product } from '../types';

export function ProductPage() {
  const { id } = useParams<{ id: string }>();
  const [product, setProduct] = useState<Product | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    if (!id) return;

    fetchProduct(id)
      .then(data => {
        setProduct(data);
        setIsLoading(false);
      })
      .catch(() => {
        setIsLoading(false);
      });
  }, [id]);

  if (isLoading) return <div>Loading...</div>;
  if (!product) return <div>Product not found</div>;

  return (
    <div className="product-page">
      <img src={product.image} alt={product.name} />
      <div className="product-info">
        <h1>{product.name}</h1>
        <p className="price">${product.price}</p>
        <p className="description">{product.description}</p>
        <button disabled={!product.inStock}>
          {product.inStock ? 'Add to Cart' : 'Out of Stock'}
        </button>
      </div>
    </div>
  );
}

// src/App.tsx
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import { HomePage } from './pages/HomePage';
import { ProductPage } from './pages/ProductPage';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
      </nav>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/product/:id" element={<ProductPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

# Build for production
npm run build

# The build creates static files in dist/
# Deploy to any static host (Netlify, Vercel, etc.)

# View the source of your deployed site
curl https://your-site.com | grep -A 20 "<body>"

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
    <script type="module" crossorigin src="/assets/index-a3b4c5d6.js"></script>
    <link rel="stylesheet" href="/assets/index-e7f8g9h0.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

# Simulate a search engine crawler (no JavaScript execution)
curl -A "Googlebot" https://your-site.com/product/1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vite + React + TS</title>
    <script type="module" crossorigin src="/assets/index-a3b4c5d6.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

# Run Lighthouse audit
npx lighthouse https://your-site.com --view

Performance: 62/100

Metrics:
- First Contentful Paint (FCP): 2.1s
- Largest Contentful Paint (LCP): 3.8s
- Time to Interactive (TTI): 4.2s
- Total Blocking Time (TBT): 890ms
- Cumulative Layout Shift (CLS): 0.12

Opportunities:
- Eliminate render-blocking resources: 1.2s savings
- Reduce JavaScript execution time: 2.1s savings
- Serve static assets with efficient cache policy

Waterfall view:
1. index.html          200ms  (3KB)
2. index-a3b4c5d6.js   450ms  (245KB) ← React + React Router + Your code
3. index-e7f8g9h0.css  120ms  (12KB)
4. [JavaScript executes]        800ms  ← React hydration
5. /api/products       500ms  (2KB)   ← Data fetch
6. [React renders]              200ms  ← Component rendering

Total time to content: 2,270ms
Total time to interactive: 4,200ms

# Check Open Graph tags
curl https://your-site.com/product/1 | grep "og:"

(no results)

┌─────────────────────────────┐
│ your-site.com               │
│                             │
│ No preview available        │
└─────────────────────────────┘

┌─────────────────────────────┐
│ [Product Image]             │
│ Wireless Headphones         │
│ Premium noise-cancelling... │
│ $299.99                     │
└─────────────────────────────┘

<head>
  <meta charset="UTF-8" />
  <title>Vite + React + TS</title>
  <!-- No og:title -->
  <!-- No og:description -->
  <!-- No og:image -->
  <!-- No twitter:card -->
</head>

# Lighthouse with throttling
npx lighthouse https://your-site.com --throttling.cpuSlowdownMultiplier=4 --view

Performance: 23/100

Metrics:
- First Contentful Paint (FCP): 8.4s
- Largest Contentful Paint (LCP): 14.2s
- Time to Interactive (TTI): 18.7s
- Total Blocking Time (TBT): 3,420ms

User Experience:
- 8.4 seconds of blank screen
- 14.2 seconds until products appear
- 18.7 seconds until page is interactive

Waterfall view:
1. index.html          1,200ms  (3KB)
2. index-a3b4c5d6.js   8,400ms  (245KB) ← 8.4 seconds to download
3. [JavaScript executes]        3,200ms  ← Slow CPU
4. /api/products       2,100ms  (2KB)
5. [React renders]              800ms

Total time to content: 15,700ms (15.7 seconds!)

Browser Request:
1. Browser: "GET /"
2. Server: "Here's empty HTML + JavaScript URL"
3. Browser downloads JavaScript (245KB)
4. Browser executes JavaScript (800ms)
5. React renders components
6. Browser: "GET /api/products"
7. Server: "Here's the data"
8. React re-renders with data
9. User finally sees content (4+ seconds later)

Browser Request:
1. Browser: "GET /"
2. Server executes React components
3. Server fetches data from database/API
4. Server renders HTML with actual content
5. Server: "Here's complete HTML + JavaScript URL"
6. Browser displays HTML immediately (content visible!)
7. Browser downloads JavaScript in background
8. React "hydrates" (makes interactive)
9. User sees content in <1 second, interactive in 2 seconds

<!-- What Google receives -->
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
    <script src="/assets/index-a3b4c5d6.js"></script>
  </body>
</html>

<markdown>
**What changed**:
- ✅ Complete HTML with all product content
- ✅ Proper meta tags for SEO
- ✅ Open Graph tags for social media
- ✅ Content visible in "View Source"
- ✅ Search engines can index everything

#### Failure 2: Performance Cliff → Fast Initial Load

**Before (CSR) - Network Waterfall**:
</markdown>

0ms    ████ index.html (3KB)
200ms  ████████████████████ index.js (245KB)
650ms  [JavaScript executes - 800ms]
1450ms ████████ /api/products (2KB)
1950ms [React renders - 200ms]
2150ms USER SEES CONTENT ← 2.15 seconds

0ms    ████████████ index.html (15KB, includes content!)
800ms  USER SEES CONTENT ← 0.8 seconds
800ms  ████████████████████ index.js (245KB, loads in background)
1250ms [React hydrates - 400ms]
1650ms PAGE INTERACTIVE ← 1.65 seconds

┌─────────────────────────────┐
│ your-site.com               │
│                             │
│ No preview available        │
└─────────────────────────────┘

┌─────────────────────────────┐
│ [Headphones Image]          │
│ Wireless Headphones         │
│ Premium noise-cancelling... │
│ $299.99 · ShopHub          │
└─────────────────────────────┘

0ms    Blank screen
8400ms Still blank (JavaScript downloading)
11600ms Still blank (JavaScript executing)
13700ms Loading spinner
15700ms USER SEES CONTENT ← 15.7 seconds!

0ms    Blank screen
2100ms USER SEES CONTENT ← 2.1 seconds
2100ms JavaScript downloading in background
10500ms JavaScript executing
11300ms PAGE INTERACTIVE ← 11.3 seconds (but readable at 2.1s!)

// Admin dashboard - no SEO needed, behind auth
function AdminDashboard() {
  const [analytics, setAnalytics] = useState(null);

  useEffect(() => {
    // This is fine - users are authenticated, SEO doesn't matter
    fetchAnalytics().then(setAnalytics);
  }, []);

  return <div>{/* Dashboard UI */}</div>;
}

// Product page - needs SEO, social sharing, fast load
export async function getServerSideProps({ params }) {
  // Fetch on server, render with data
  const product = await fetchProduct(params.id);
  return { props: { product } };
}

function ProductPage({ product }) {
  // Content already in HTML, SEO works, fast load
  return <div>{/* Product UI */}</div>;
}

// Next.js - Static generation
export async function getStaticProps() {
  const posts = await fetchBlogPosts();
  return { props: { posts } };
}

// HTML generated once at build time
// Served as static file (super fast!)

// Next.js - ISR
export async function getStaticProps() {
  const products = await fetchProducts();
  return {
    props: { products },
    revalidate: 60 // Regenerate every 60 seconds
  };
}

// First request: serve stale static HTML
// Background: regenerate new HTML
// Next request: serve fresh HTML

// Next.js - SSR
export async function getServerSideProps({ req }) {
  const user = await getUserFromSession(req);
  const recommendations = await fetchRecommendations(user.id);
  return { props: { recommendations } };
}

// Rendered fresh on every request
// Personalized for each user

// Standard React - CSR
function Dashboard() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchDashboardData().then(setData);
  }, []);

  return <div>{/* Dashboard UI */}</div>;
}

// Renders in browser only
// Perfect for authenticated apps

// Next.js App Router - Hybrid approach

// Static: Marketing pages
// app/page.tsx
export default function HomePage() {
  return <div>Static marketing content</div>;
}

// ISR: Product catalog
// app/products/page.tsx
export const revalidate = 3600; // 1 hour

export default async function ProductsPage() {
  const products = await fetchProducts();
  return <ProductList products={products} />;
}

// SSR: User dashboard
// app/dashboard/page.tsx
export const dynamic = 'force-dynamic';

export default async function DashboardPage() {
  const user = await getCurrentUser();
  const data = await fetchUserData(user.id);
  return <Dashboard data={data} />;
}

// CSR: Interactive features
// app/dashboard/analytics.tsx
'use client';

export function Analytics() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchAnalytics().then(setData);
  }, []);

  return <AnalyticsChart data={data} />;
}

Does content need SEO?
├─ No → CSR (client-side rendering)
└─ Yes
   └─ Does content change per user?
      ├─ Yes → SSR (server-side rendering)
      └─ No
         └─ Does content change often?
            ├─ Yes → ISR (incremental static regeneration)
            └─ No → SSG (static site generation)

// Next.js 14 (App Router)
import { notFound } from 'next/navigation';

interface Product {
  id: string;
  name: string;
  description: string;
  price: number;
}

async function fetchProduct(id: string): Promise<Product | null> {
  const res = await fetch(`https://api.example.com/products/${id}`, {
    next: { revalidate: 3600 } // Cache for 1 hour
  });

  if (!res.ok) return null;
  return res.json();
}

export async function generateMetadata({ params }: { params: { id: string } }) {
  const product = await fetchProduct(params.id);

  if (!product) return { title: 'Product Not Found' };

  return {
    title: product.name,
    description: product.description,
    openGraph: {
      title: product.name,
      description: product.description,
      images: [`/products/${product.id}.jpg`],
    },
  };
}

export default async function ProductPage({ params }: { params: { id: string } }) {
  const product = await fetchProduct(params.id);

  if (!product) notFound();

  return (
    <div className="product-page">
      <h1>{product.name}</h1>
      <p className="price">${product.price}</p>
      <p className="description">{product.description}</p>
      <button>Add to Cart</button>
    </div>
  );
}

// Remix
import { json, type LoaderFunctionArgs, type MetaFunction } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';

interface Product {
  id: string;
  name: string;
  description: string;
  price: number;
}

export const loader = async ({ params }: LoaderFunctionArgs) => {
  const res = await fetch(`https://api.example.com/products/${params.id}`);

  if (!res.ok) {
    throw new Response('Not Found', { status: 404 });
  }

  const product: Product = await res.json();

  return json(
    { product },
    {
      headers: {
        'Cache-Control': 'public, max-age=3600', // Cache for 1 hour
      },
    }
  );
};

export const meta: MetaFunction<typeof loader> = ({ data }) => {
  if (!data) return [{ title: 'Product Not Found' }];

  return [
    { title: data.product.name },
    { name: 'description', content: data.product.description },
    { property: 'og:title', content: data.product.name },
    { property: 'og:description', content: data.product.description },
  ];
};

export default function ProductPage() {
  const { product } = useLoaderData<typeof loader>();

  return (
    <div className="product-page">
      <h1>{product.name}</h1>
      <p className="price">${product.price}</p>
      <p className="description">{product.description}</p>
      <button>Add to Cart</button>
    </div>
  );
}

---
// Astro
export async function getStaticPaths() {
  // For static generation, must define all paths at build time
  const products = await fetch('https://api.example.com/products').then(r => r.json());

  return products.map((product: any) => ({
    params: { id: product.id },
    props: { product },
  }));
}

interface Product {
  id: string;
  name: string;
  description: string;
  price: number;
}

const { product } = Astro.props as { product: Product };
---

<html>
  <head>
    <title>{product.name}</title>
    <meta name="description" content={product.description} />
    <meta property="og:title" content={product.name} />
    <meta property="og:description" content={product.description} />
  </head>
  <body>
    <div class="product-page">
      <h1>{product.name}</h1>
      <p class="price">${product.price}</p>
      <p class="description">{product.description}</p>
      <button>Add to Cart</button>
    </div>
  </body>
</html>

// Pros: Automatic, magical
export default async function Page() {
  const data = await fetch('...'); // Just works, automatic caching
  return <div>{data}</div>;
}

// Cons: Magic can be confusing
// When does this run? Server? Client? Both?
// What's cached? For how long?

// Pros: Explicit, clear separation
export const loader = async () => {
  // Runs on server, always
  const data = await fetch('...');
  return json({ data });
};

export default function Page() {
  // Runs on server AND client (hydration)
  const { data } = useLoaderData();
  return <div>{data}</div>;
}

// Cons: More boilerplate

---
// Pros: Simple, HTML-first
const data = await fetch('...');
---

<div>{data}</div>

<!-- Cons: Different syntax, less React-like -->

// Next.js - Perfect for e-commerce
// app/products/[id]/page.tsx
export const revalidate = 3600; // ISR: regenerate hourly

export default async function ProductPage({ params }) {
  const product = await fetchProduct(params.id);
  return <ProductDetail product={product} />;
}

// app/cart/page.tsx
export const dynamic = 'force-dynamic'; // SSR: always fresh

export default async function CartPage() {
  const user = await getCurrentUser();
  const cart = await fetchCart(user.id);
  return <Cart items={cart.items} />;
}

---
// Astro - Perfect for marketing sites
// src/pages/index.astro
const posts = await fetchBlogPosts();
---

<html>
  <body>
    <h1>Welcome to Our Site</h1>
    <!-- Zero JavaScript shipped -->
    <BlogList posts={posts} />

    <!-- Add React only where needed -->
    <ContactForm client:load />
  </body>
</html>

// Remix - Great for SaaS dashboards
export const loader = async ({ request }: LoaderFunctionArgs) => {
  const user = await requireAuth(request);
  const data = await fetchDashboardData(user.id);
  return json({ data });
};

export const action = async ({ request }: ActionFunctionArgs) => {
  const formData = await request.formData();
  // Form works even without JavaScript!
  await updateSettings(formData);
  return redirect('/dashboard');
};

// Next.js - Also great for SaaS
'use client';

export default function Dashboard() {
  const { data } = useSWR('/api/dashboard', fetcher);

  return (
    <div>
      <DashboardCharts data={data} />
      <RealTimeUpdates />
    </div>
  );
}

---
// Astro - Perfect for docs
// src/pages/docs/[...slug].astro
import { getCollection } from 'astro:content';

export async function getStaticPaths() {
  const docs = await getCollection('docs');
  return docs.map(doc => ({
    params: { slug: doc.slug },
    props: { doc },
  }));
}

const { doc } = Astro.props;
const { Content } = await doc.render();
---

<article>
  <h1>{doc.data.title}</h1>
  <Content />
</article>

What are you building?

├─ Mostly static content (blog, marketing, docs)
│  └─ Need maximum performance?
│     ├─ Yes → Astro
│     └─ No, need more flexibility → Next.js
│
├─ E-commerce or content platform
│  └─ Next.js (ISR + SSR hybrid)
│
├─ SaaS dashboard or web app
│  └─ Behind authentication?
│     ├─ Yes → Remix or Next.js (CSR is fine)
│     └─ No, public-facing → Next.js
│
└─ Complex, user-specific content
   └─ Prefer web fundamentals?
      ├─ Yes → Remix
      └─ No, want more magic → Next.js

# Create a new Next.js app with TypeScript
npx create-next-app@latest shophub-nextjs

# You'll be prompted with these options:
# ✔ Would you like to use TypeScript? Yes
# ✔ Would you like to use ESLint? Yes
# ✔ Would you like to use Tailwind CSS? Yes
# ✔ Would you like to use `src/` directory? Yes
# ✔ Would you like to use App Router? Yes
# ✔ Would you like to customize the default import alias? No

cd shophub-nextjs

shophub-nextjs/
├── src/
│   └── app/
│       ├── layout.tsx      ← Root layout (wraps all pages)
│       ├── page.tsx        ← Home page (/)
│       └── globals.css     ← Global styles
├── public/                 ← Static assets
├── next.config.js          ← Next.js configuration
├── tsconfig.json           ← TypeScript configuration
└── package.json

npm run dev
# Open http://localhost:3000

// src/types/product.ts
export interface Product {
  id: string;
  name: string;
  description: string;
  price: number;
  image: string;
  category: string;
  inStock: boolean;
}

// src/lib/api.ts
import { Product } from '@/types/product';

// Simulating an API - in production, this would be a real database
const products: Product[] = [
  {
    id: '1',
    name: 'Wireless Headphones',
    description: 'Premium noise-cancelling headphones with 30-hour battery life. Perfect for travel and focused work.',
    price: 299.99,
    image: '/products/headphones.jpg',
    category: 'Electronics',
    inStock: true
  },
  {
    id: '2',
    name: 'Smart Watch',
    description: 'Fitness tracking and notifications on your wrist. Water-resistant with 7-day battery life.',
    price: 399.99,
    image: '/products/watch.jpg',
    category: 'Electronics',
    inStock: true
  },
  {
    id: '3',
    name: 'Laptop Stand',
    description: 'Ergonomic aluminum stand for better posture. Adjustable height and angle.',
    price: 49.99,
    image: '/products/stand.jpg',
    category: 'Accessories',
    inStock: false
  },
  {
    id: '4',
    name: 'Mechanical Keyboard',
    description: 'Premium mechanical switches with RGB backlighting. Perfect for typing and gaming.',
    price: 159.99,
    image: '/products/keyboard.jpg',
    category: 'Electronics',
    inStock: true
  }
];

// Simulate network delay
const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));

export async function getProducts(): Promise<Product[]> {
  await delay(100); // Simulate API latency
  return products;
}

export async function getProduct(id: string): Promise<Product | null> {
  await delay(100);
  return products.find(p => p.id === id) || null;
}

export async function getProductsByCategory(category: string): Promise<Product[]> {
  await delay(100);
  return products.filter(p => p.category === category);
}

// src/app/page.tsx
import Link from 'next/link';
import { getProducts } from '@/lib/api';

export default async function HomePage() {
  // This runs on the SERVER
  // Data is fetched during server-side rendering
  const products = await getProducts();

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-4xl font-bold mb-8">ShopHub - Premium Products</h1>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {products.map(product => (
          <Link
            key={product.id}
            href={`/product/${product.id}`}
            className="border rounded-lg p-6 hover:shadow-lg transition-shadow"
          >
            <div className="aspect-square bg-gray-200 rounded-lg mb-4 flex items-center justify-center">
              <span className="text-gray-400">Image</span>
            </div>

            <h2 className="text-xl font-semibold mb-2">{product.name}</h2>

            <p className="text-2xl font-bold text-blue-600 mb-2">
              ${product.price}
            </p>

            <p className={`text-sm ${product.inStock ? 'text-green-600' : 'text-red-600'}`}>
              {product.inStock ? 'In Stock' : 'Out of Stock'}
            </p>
          </Link>
        ))}
      </div>
    </div>
  );
}

# In browser: Right-click → View Page Source
# Or use curl:
curl http://localhost:3000

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Create Next App</title>
    <!-- ... -->
  </head>
  <body>
    <div class="container mx-auto px-4 py-8">
      <h1 class="text-4xl font-bold mb-8">ShopHub - Premium Products</h1>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <a href="/product/1" class="border rounded-lg p-6 hover:shadow-lg transition-shadow">
          <div class="aspect-square bg-gray-200 rounded-lg mb-4 flex items-center justify-center">
            <span class="text-gray-400">Image</span>
          </div>
          <h2 class="text-xl font-semibold mb-2">Wireless Headphones</h2>
          <p class="text-2xl font-bold text-blue-600 mb-2">$299.99</p>
          <p class="text-sm text-green-600">In Stock</p>
        </a>
        <!-- More products... -->
      </div>
    </div>
  </body>
</html>

// src/app/product/[id]/page.tsx
import { notFound } from 'next/navigation';
import Link from 'next/link';
import { getProduct, getProducts } from '@/lib/api';
import { Metadata } from 'next';

// Generate metadata for SEO
export async function generateMetadata({ 
  params 
}: { 
  params: { id: string } 
}): Promise<Metadata> {
  const product = await getProduct(params.id);

  if (!product) {
    return {
      title: 'Product Not Found',
    };
  }

  return {
    title: `${product.name} - ShopHub`,
    description: product.description,
    openGraph: {
      title: product.name,
      description: product.description,
      images: [product.image],
    },
    twitter: {
      card: 'summary_large_image',
      title: product.name,
      description: product.description,
      images: [product.image],
    },
  };
}

// Generate static paths for all products (optional, for static generation)
export async function generateStaticParams() {
  const products = await getProducts();

  return products.map(product => ({
    id: product.id,
  }));
}

export default async function ProductPage({ 
  params 
}: { 
  params: { id: string } 
}) {
  const product = await getProduct(params.id);

  // If product doesn't exist, show 404
  if (!product) {
    notFound();
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <Link 
        href="/" 
        className="text-blue-600 hover:underline mb-4 inline-block"
      >
        ← Back to Products
      </Link>

      <div className="grid md:grid-cols-2 gap-8">
        <div className="aspect-square bg-gray-200 rounded-lg flex items-center justify-center">
          <span className="text-gray-400 text-xl">Product Image</span>
        </div>

        <div>
          <h1 className="text-4xl font-bold mb-4">{product.name}</h1>

          <p className="text-3xl font-bold text-blue-600 mb-6">
            ${product.price}
          </p>

          <p className="text-gray-700 mb-6 leading-relaxed">
            {product.description}
          </p>

          <div className="mb-6">
            <span className="inline-block px-3 py-1 bg-gray-200 rounded-full text-sm">
              {product.category}
            </span>
          </div>

          <button
            disabled={!product.inStock}
            className={`w-full py-3 px-6 rounded-lg font-semibold ${
              product.inStock
                ? 'bg-blue-600 text-white hover:bg-blue-700'
                : 'bg-gray-300 text-gray-500 cursor-not-allowed'
            }`}
          >
            {product.inStock ? 'Add to Cart' : 'Out of Stock'}
          </button>
        </div>
      </div>
    </div>
  );
}

curl http://localhost:3000/product/1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Wireless Headphones - ShopHub</title>
    <meta name="description" content="Premium noise-cancelling headphones with 30-hour battery life. Perfect for travel and focused work."/>

    <!-- Open Graph tags for social media -->
    <meta property="og:title" content="Wireless Headphones"/>
    <meta property="og:description" content="Premium noise-cancelling headphones with 30-hour battery life. Perfect for travel and focused work."/>
    <meta property="og:image" content="/products/headphones.jpg"/>

    <!-- Twitter Card tags -->
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:title" content="Wireless Headphones"/>
    <meta name="twitter:description" content="Premium noise-cancelling headphones with 30-hour battery life. Perfect for travel and focused work."/>
    <meta name="twitter:image" content="/products/headphones.jpg"/>
  </head>
  <body>
    <div class="container mx-auto px-4 py-8">
      <!-- Full product HTML here -->
      <h1 class="text-4xl font-bold mb-4">Wireless Headphones</h1>
      <p class="text-3xl font-bold text-blue-600 mb-6">$299.99</p>
      <!-- ... -->
    </div>
  </body>
</html>

// src/app/layout.tsx
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: {
    default: 'ShopHub - Premium Products',
    template: '%s | ShopHub', // Used by child pages
  },
  description: 'Discover premium electronics and accessories at ShopHub',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <header className="border-b">
          <nav className="container mx-auto px-4 py-4">
            <div className="flex items-center justify-between">
              <a href="/" className="text-2xl font-bold text-blue-600">
                ShopHub
              </a>

              <div className="flex gap-6">
                <a href="/" className="hover:text-blue-600">
                  Products
                </a>
                <a href="/about" className="hover:text-blue-600">
                  About
                </a>
              </div>
            </div>
          </nav>
        </header>

        <main className="min-h-screen">
          {children}
        </main>

        <footer className="border-t mt-12">
          <div className="container mx-auto px-4 py-8 text-center text-gray-600">
            <p>© 2024 ShopHub. All rights reserved.</p>
          </div>
        </footer>
      </body>
    </html>
  );
}

# Build for production
npm run build

# Start production server
npm start

# Run Lighthouse
npx lighthouse http://localhost:3000 --view

Performance: 98/100 ← Was 62/100 with pure React

Metrics:
- First Contentful Paint (FCP): 0.6s ← Was 2.1s (72% faster!)
- Largest Contentful Paint (LCP): 0.9s ← Was 3.8s (76% faster!)
- Time to Interactive (TTI): 1.2s ← Was 4.2s (71% faster!)
- Total Blocking Time (TBT): 120ms ← Was 890ms (87% reduction!)
- Cumulative Layout Shift (CLS): 0 ← Was 0.12

SEO: 100/100 ← Was 0/100 (no content in HTML)
Best Practices: 100/100
Accessibility: 95/100

0ms    ████ index.html (3KB, empty)
200ms  ████████████████████ index.js (245KB)
650ms  [JavaScript executes - 800ms]
1450ms ████████ /api/products (2KB)
1950ms [React renders - 200ms]
2150ms USER SEES CONTENT

0ms    ████████████ index.html (18KB, includes all products!)
600ms  USER SEES CONTENT ← 72% faster!
600ms  ████████████████████ _app.js (85KB, loads in background)
900ms  [React hydrates - 300ms]
1200ms PAGE INTERACTIVE

# Verify your app works
npm run dev

# Open http://localhost:3000
# You should see:
# - Home page with product list
# - Click a product to see detail page
# - View source to verify HTML contains content

# Build for production
npm run build

# Verify build succeeds
# You should see:
# ✓ Compiled successfully
# ✓ Collecting page data
# ✓ Generating static pages

# Start production server
npm start

# Verify production works
# Open http://localhost:3000
# Should work identically to dev mode